<template>
    <div class="wx-message px-5 py-2">
        <div class="inner flex gap-2" :class="{ 'reply': isReply }">
            <img class="h-10 w-10 rounded-full" :src="avatar" alt="">
            <div class="content mt-[2px] overflow-hidden flex-shrink fix-video-overflow">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    avatar: string,
    isReply?: boolean
}>()


</script>

<style scoped>

.inner {
    margin-left: 0;
    margin-right: 30%;
}

.inner.reply {
    margin-left: 30%;
    margin-right: 0;
}

.reply {
    flex-direction: row-reverse;
}

.content {
    font-size: 14px;
    line-height: 22px;
    color: white;
    background: #3B3D41;
    border-radius: 2px 8px 8px 8px;
}

.reply .content {
    background: #EED096;
    border-radius: 8px 2px 8px 8px;
}

.fix-video-overflow {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
</style>